<template>
  <div class="publish-module-container">
    <Title title="发布信息" font-size="16px" style="margin-bottom: 17px;">
      <tipIcon :content="tipContent" use-html class="ml5"></tipIcon>
    </Title>
    <simpleEditTable
      ref="simpleEditTableRef"
      :get-order-info="getOrderInfo"
      :disabled="isFileDisabled"
      :publish-url="publishDataList.publishUrl"
      :order-id="orderId"
      v-model="tableData"
      :not-pick-platform="Boolean(!pickPlatformIds.includes(plateformId) && plateformId)"
      :list-setting="listSetting"
      :header-check="headerCheck"
      :is-link-required="isLinkRequired"
      :show-operate="true"
      @checkLink="handleCheckLink" />
  </div>
</template>

<script>
import Title from '@/components/Title';
import contrastData from './mixins/contrastData';
import simpleEditTable from '@/components/Common/simpleEditTable.vue';
import { checkLink } from '@/api/publish';
import { showModal } from '@/utils/message';
import { PICK_PLATFORM } from '@/utils/const';

export default {
  components: { Title, simpleEditTable },
  mixins: [contrastData],
  props: {
    isFileDisabled: {
      type: Boolean,
      default: false
    },
    editLimt: {
      type: Boolean,
      default: false
    },
    orderNum: { // 订单编号，新建时为空
      type: String,
      default: ''
    },
    orderId: { // 订单id，新建时为空
      type: String | Number,
      default: ''
    },
    isChangeOrder: { // 是否是变更单
      type: Boolean,
      default: false
    },
    getOrderInfo: {
      type: Function,
      default: null
    },
    plateformId: {
      type: Number,
      default: null
    },
    orderForm: {
      type: String,
      default: ''
    },
    isLinkRequired: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      headerCheck: {
        autoPick: false
      },
      publishDataList: {
        status: '',
        publishUrl: '',
        publishRemark: '',
        attachment: [],
        createTime: '',
        publishData: {}
      },
      rules: {},
      backupsData: {},
      pickPlatformIds: [3, 4, 5], // 微博、微信、小红书
      tipContent: '发布链接可以不必填的情况<br>1、订单来源为达人个人引进<br>2、下单形式为“流量主”时<br>3、订单来源不为达人个人引进且下单形式通用设置配置发布链接非必填'
    };
  },
  computed: {
    tableData() {
      return [this.publishDataList];
    },
    listSetting() {
      const orderNum = this.orderNum;
      const extendParams = {
        orderId: orderNum || '',
        type: 1
      };
      return [
        { label: '发布链接', type: 'inputText', prop: { width: '250px' }, maxlength: 500, placeholder: '请输入链接', headerCheck: 'autoPick', headerCheckLabel: '采集数据', width: '160px', isRequired: this.isLinkRequired, keyword: 'publishUrl' },
        { label: '发布文案', type: 'inputTextarea', prop: { width: '200px' }, maxlength: 500, keyword: 'publishRemark' },
        { label: '发布截图', type: 'attachment', prop: { width: '200px' }, keyword: 'attachment', extendParams, importApi: '/common/file/upload' },
        { label: '发布数据', type: 'publishData', prop: { minWidth: '200px' }, keyword: 'publishData', placeholder: '输入链接自动获取' },
        { label: '发布时间', type: 'createTime', prop: { width: '160px' }, keyword: 'createTime', placeholder: '输入链接自动获取' },
        { label: '采集有效时间', type: 'createTime', prop: { minWidth: '160px' }, keyword: 'pickTime', placeholder: '输入链接自动获取' }
      ];
    }
  },
  watch: {
    'plateformId': {
      handler(val) {
        // v3.4.7 新建时下单平台选择微博、微信、小红书三个时，采集数据改为默认为勾选状态
        if (this.pickPlatformIds.includes(val) && !this.orderId) {
          this.headerCheck.autoPick = this.orderForm ? this.isLinkRequired : true;
        }
      }
    },
    'orderForm': {
      handler(val) {
        if (this.pickPlatformIds.includes(this.plateformId) && !this.orderId) {
          this.$nextTick(() => {
            this.headerCheck.autoPick = this.isLinkRequired;
          });
        }
      }
    },
    'isLinkRequired': {
      handler(val) {
        if (this.pickPlatformIds.includes(this.plateformId) && !this.orderId) {
          this.$nextTick(() => {
            this.headerCheck.autoPick = val;
          });
        }
      }
    }
  },
  methods: {
    // 编辑时注入数据
    insertDetail(item) {
      this.backupsData = _.cloneDeep(item.publishInfo || {});
      const publishInfo = _.cloneDeep(item.publishInfo || {});
      publishInfo.attachment = publishInfo.attachment || [];
      publishInfo.publishRemark = publishInfo.publishRemark || '';

      this.publishDataList = publishInfo;
      this.headerCheck.autoPick = this.publishDataList.autoPick || false;
      this.headerCheck.status = this.publishDataList.status || '';
    },
    validateForm(validate = true, index = 0) {
      return new Promise((resolve, reject) => {
        if (validate) {
          this.$refs.simpleEditTableRef.validate().then(valid => {
            if (valid) {
              resolve(valid);
            } else {
              reject(index);
            }
          });
        } else {
          resolve(true);
        }
      });
    },
    // 提供给父组件来获取参数
    getParams() {
      const params = _.cloneDeep(this.publishDataList);
      params.autoPick = this.headerCheck.autoPick;
      return params;
    },
    orderPlatformChange(plateformId, orderPlatformOption) {
      let name = '';
      const item = orderPlatformOption.find(i => {
        return i.id === plateformId;
      });
      if (item && item.value) name = item.value;
      if (!name || !PICK_PLATFORM.includes(name)) {
        this.headerCheck.autoPick = false;
      }
    },
    handleCheckLink() {
      const params = {
        link: this.publishDataList.publishUrl,
        platformCategory: this.getOrderInfo() ? this.getOrderInfo().orderInfo.orderPlatformId : 0
      };
      checkLink(params).then(_ => {
      }).catch(err => {
        if (err.code === 502) {
          showModal('请注意：检测到提交的发布链接异常，可能无法采集到数据。请确认后重新提交。', '', {}, true).then(_ => {
          }).catch(_ => {
            this.publishDataList.publishUrl = '';
            this.headerCheck.autoPick = false;
          });
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.publish-module-container {
  background: #fff;
  padding: 16px 24px 0 24px;
  & ::v-deep {
    .el-form-item {
      .el-select {
        width: 240px;
      }
      .el-input__inner {
        width: 240px;
      }
      .el-textarea__inner {
        height: 64px !important;
      }
    }
  }
}
</style>
